<div class="feature-row" *ngIf="toggleState$ | async as toggleState">
  <span>{{ 'SETTING.FEATURES.' + (toggleStateKey | uppercase) | translate }}</span>
  <div class="row">
    <mat-button-toggle-group
      class="theme-toggle"
      class="buttongroup"
      [(ngModel)]="toggleState.enabled"
      (change)="toggleChange.emit(toggleState)"
      name="displayview"
    >
      <mat-button-toggle [value]="false">
        <div class="toggle-row">
          <span>{{ 'SETTING.FEATURES.STATES.DISABLED' | translate }}</span>

          <div
            *ngIf="!toggleState.enabled && (isInherited$ | async)"
            class="current-dot"
            matTooltip="{{ 'SETTING.FEATURES.INHERITEDINDICATOR_DESCRIPTION.DISABLED' | translate }}"
          ></div>
        </div>
      </mat-button-toggle>
      <mat-button-toggle [value]="true">
        <div class="toggle-row">
          <span>{{ 'SETTING.FEATURES.STATES.ENABLED' | translate }}</span>
          <div
            *ngIf="toggleState.enabled && (isInherited$ | async)"
            class="current-dot"
            matTooltip="{{ 'SETTING.FEATURES.INHERITEDINDICATOR_DESCRIPTION.ENABLED' | translate }}"
          ></div>
        </div>
      </mat-button-toggle>
    </mat-button-toggle-group>
  </div>
  <ng-content></ng-content>
  <cnsl-info-section
    class="feature-info"
    *ngIf="'SETTING.FEATURES.' + (toggleStateKey | uppercase) + '_DESCRIPTION' | translate as i18nDescription"
    >{{ i18nDescription }}</cnsl-info-section
  >
</div>
